<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Scrollbar Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../includes/style.css" />
        <link rel="stylesheet" href="../includes/prettify/prettify.css" />

        <script src="../includes/prettify/prettify.js"></script>
        <script src="../includes/jquery.js"></script>
        <script src="../jquery.scrollbar.js"></script>
        <script>
            jQuery(function($){

                function getAlignedText(text){
                    text = text.split('\n');
                    while(text.length > 0 && $.trim(text[0]) == ''){
                        text.shift();
                    }
                    var tabs = (text[0] || '').replace(/^(\s+).+$/, '$1');
                    for(var i=0; i<text.length; i++){
                        text[i] = text[i].replace(tabs, '');
                    }
                    if(text.length > 0 && text[text.length - 1].match(/^\s*$/)){
                        text.pop();
                    }
                    return text.join('\n');
                }

                $('.container').each(function(){

                    var content =  $(this).find('.content');
                    var controls = $(this).find('.controls');

                    $('<pre></pre>').addClass('prettyprint linenums lang-html').text(getAlignedText(content.find('.demo').html())).appendTo(content.find('.html'));
                    $('<pre></pre>').addClass('prettyprint linenums lang-css').text(getAlignedText($('#css-common').html()) + "\n" + getAlignedText(content.find('style').html())).appendTo(content.find('.css'));
                    $('<pre></pre>').addClass('prettyprint linenums lang-js').text(getAlignedText(content.find('script').html())).appendTo(content.find('.js'));

                    controls.on('click', 'span', function(){
                        content.find('.' + $(this).removeClass('active').attr('class')).show().siblings('div').hide();
                        $(this).addClass('active').siblings('span').removeClass('active');
                    });
                    controls.find('.demo').click();
                });

                $('.container').on('click', '.add-content', function(){
                    $('#lorem-ipsum').clone().removeAttr('id').appendTo($(this).closest('.container').find('.scroll-content'));
                    return false;
                });
                $('.container').on('click', '.remove-content', function(){
                    $(this).closest('.container').find('.scroll-content').find('p').not('.permanent').last().remove();
                    return false;
                });

                window.prettyPrint && prettyPrint();
                $('.wrapper').scrollbar();
            });
        </script>

        <script type="text/javascript">
            if(window.location.href.match(/gromo.github.io/i)){
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                ga('create', 'UA-52878040-1', 'auto');
                ga('send', 'pageview');
            }
        </script>

        <style type="text/css" id="css-common">
            /*************** SCROLLBAR BASE CSS ***************/

            .scroll-wrapper {
                overflow: hidden !important;
                padding: 0 !important;
                position: relative;
            }

            .scroll-wrapper > .scroll-content {
                border: none !important;
                box-sizing: content-box !important;
                height: auto;
                left: 0;
                margin: 0;
                max-height: none;
                max-width: none !important;
                overflow: scroll !important;
                padding: 0;
                position: relative !important;
                top: 0;
                width: auto !important;
            }

            .scroll-wrapper > .scroll-content::-webkit-scrollbar {
                height: 0;
                width: 0;
            }

            .scroll-element {
                display: none;
            }
            .scroll-element, .scroll-element div {
                box-sizing: content-box;
            }

            .scroll-element.scroll-x.scroll-scrollx_visible,
            .scroll-element.scroll-y.scroll-scrolly_visible {
                display: block;
            }

            .scroll-element .scroll-bar,
            .scroll-element .scroll-arrow {
                cursor: default;
            }

            .scroll-textarea {
                border: 1px solid #cccccc;
                border-top-color: #999999;
            }
            .scroll-textarea > .scroll-content {
                overflow: hidden !important;
            }
            .scroll-textarea > .scroll-content > textarea {
                border: none !important;
                box-sizing: border-box;
                height: 100% !important;
                margin: 0;
                max-height: none !important;
                max-width: none !important;
                overflow: scroll !important;
                outline: none;
                padding: 2px;
                position: relative !important;
                top: 0;
                width: 100% !important;
            }
            .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
                height: 0;
                width: 0;
            }




        </style>
    </head>
    <body>
        <div class="wrapper scrollbar-dynamic">
            <div class="page-content">

                <h1>Basic Scrollbars</h1>
                <p style="font-style:italic;">Resize window to 600px width to see horizontal scrollbar</p>

                <a href="advanced.html">Advanced Scrollbars Demo</a><br/>
                <a href="angular.html">jQuery Scrollbars as Angular.JS directive</a><br/>
                <a href="../">&laquo; Back to home</a>

                <p id="lorem-ipsum">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                    viverra nisi, in interdum massa nibh nec erat.
                </p>

                <div class="container">
                    <h2>Simple Inner</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SIMPLE INNER SCROLLBAR ***************/

                            .scrollbar-inner > .scroll-element,
                            .scrollbar-inner > .scroll-element div
                            {
                                border: none;
                                margin: 0;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-inner > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-inner > .scroll-element.scroll-x {
                                bottom: 2px;
                                height: 8px;
                                left: 0;
                                width: 100%;
                            }

                            .scrollbar-inner > .scroll-element.scroll-y {
                                height: 100%;
                                right: 2px;
                                top: 0;
                                width: 8px;
                            }

                            .scrollbar-inner > .scroll-element .scroll-element_outer {
                                overflow: hidden;
                            }

                            .scrollbar-inner > .scroll-element .scroll-element_outer,
                            .scrollbar-inner > .scroll-element .scroll-element_track,
                            .scrollbar-inner > .scroll-element .scroll-bar {
                                -webkit-border-radius: 8px;
                                -moz-border-radius: 8px;
                                border-radius: 8px;
                            }

                            .scrollbar-inner > .scroll-element .scroll-element_track,
                            .scrollbar-inner > .scroll-element .scroll-bar {
                                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
                                filter: alpha(opacity=40);
                                opacity: 0.4;
                            }

                            .scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
                            .scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
                            .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
                            .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }


                            /* update scrollbar offset if both scrolls are visible */

                            .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
                            .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


                            .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
                            .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-inner').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-inner">
                                <p class="permanent">
                                    Simple inner scrollbar over content
                                </p>
                                <p class="permanent">
                                    <a href="#anchor">Click to test #anchors</a><br/><br/>
                                    <input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <input type="text"><br/>
                                <h3 id="anchor">Anchor</h3>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Simple Outer</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SIMPLE OUTER SCROLLBAR ***************/

                            .scrollbar-outer > .scroll-element,
                            .scrollbar-outer > .scroll-element div
                            {
                                border: none;
                                margin: 0;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-outer > .scroll-element {
                                background-color: #ffffff;
                            }

                            .scrollbar-outer > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-outer > .scroll-element.scroll-x {
                                bottom: 0;
                                height: 12px;
                                left: 0;
                                width: 100%;
                            }

                            .scrollbar-outer > .scroll-element.scroll-y {
                                height: 100%;
                                right: 0;
                                top: 0;
                                width: 12px;
                            }

                            .scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
                            .scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }

                            .scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; }
                            .scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; }

                            .scrollbar-outer > .scroll-element .scroll-element_outer,
                            .scrollbar-outer > .scroll-element .scroll-element_track,
                            .scrollbar-outer > .scroll-element .scroll-bar {
                                -webkit-border-radius: 8px;
                                -moz-border-radius: 8px;
                                border-radius: 8px;
                            }

                            .scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; }
                            .scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
                            .scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }


                            /* scrollbar height/width & offset from container borders */

                            .scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
                            .scrollbar-outer > .scroll-content.scroll-scrollx_visible { top:  -12px; margin-top:  12px; }

                            .scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
                            .scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; }


                            /* update scrollbar offset if both scrolls are visible */

                            .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
                            .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }

                            .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
                            .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-outer').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-outer">
                                <p class="permanent">
                                    Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
                                    This example shows nested scrollbars functionality: nested scrollbar styles do not
                                    interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
                                    inside each other.
                                </p>
                                <div class="inner-content scrollbar-dynamic">
                                    <div style="padding: 10px;">
                                        <h4>
                                            This container is an example of nested Dynamic scrollbar with padding.
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                            scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                            Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                            hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                            pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                            sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                            ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                            nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                            viverra nisi, in interdum massa nibh nec erat.
                                        </p>
                                    </div>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Mac OS X Lion</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SCROLLBAR MAC OS X ***************/

                            .scrollbar-macosx > .scroll-element,
                            .scrollbar-macosx > .scroll-element div
                            {
                                background: none;
                                border: none;
                                margin: 0;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-macosx > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
                            .scrollbar-macosx > .scroll-element .scroll-bar {
                                background-color: #6C6E71;
                                display: block;

                                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                                filter: alpha(opacity=0);
                                opacity: 0;

                                -webkit-border-radius: 7px;
                                -moz-border-radius: 7px;
                                border-radius: 7px;

                                -webkit-transition: opacity 0.2s linear;
                                -moz-transition: opacity 0.2s linear;
                                -o-transition: opacity 0.2s linear;
                                -ms-transition: opacity 0.2s linear;
                                transition: opacity 0.2s linear;
                            }
                            .scrollbar-macosx:hover > .scroll-element .scroll-bar,
                            .scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
                                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
                                filter: alpha(opacity=70);
                                opacity: 0.7;
                            }


                            .scrollbar-macosx > .scroll-element.scroll-x {
                                bottom: 0px;
                                height: 0px;
                                left: 0;
                                min-width: 100%;
                                overflow: visible;
                                width: 100%;
                            }

                            .scrollbar-macosx > .scroll-element.scroll-y {
                                height: 100%;
                                min-height: 100%;
                                right: 0px;
                                top: 0;
                                width: 0px;
                            }

                            /* scrollbar height/width & offset from container borders */
                            .scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
                            .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }

                            .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
                            .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }

                            .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
                            .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }

                            /* update scrollbar offset if both scrolls are visible */
                            .scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
                            .scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-macosx').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-macosx">
                                <p class="permanent">
                                    Traditionally scrollbars are permanently displayed whenever an area of a webpage is
                                    scrollable. By contrast, scrollbars in OSX Lion are hidden from sight, and revealed only
                                    when scrolling content. In this example, scrollbars are revealed when mouse is over content.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Light</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SCROLLBAR LIGHT ***************/

                            .scrollbar-light > .scroll-element,
                            .scrollbar-light > .scroll-element div {
                                border: none;
                                margin: 0;
                                overflow: hidden;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-light > .scroll-element {
                                background-color: #ffffff;
                            }

                            .scrollbar-light > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-light > .scroll-element .scroll-element_outer {
                                -webkit-border-radius: 10px;
                                -moz-border-radius: 10px;
                                border-radius: 10px;
                            }

                            .scrollbar-light > .scroll-element .scroll-element_size {
                                background: #dbdbdb;
                                background: url(
                                8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
                                VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
                                VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
                                Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
                                UiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
                                0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
                                c+);
                                background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
                                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
                                background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
                                background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
                                background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
                                background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%);

                                -webkit-border-radius: 10px;
                                -moz-border-radius: 10px;
                                border-radius: 10px;
                            }

                            .scrollbar-light > .scroll-element.scroll-x {
                                bottom: 0;
                                height: 17px;
                                left: 0;
                                min-width: 100%;
                                width: 100%;
                            }

                            .scrollbar-light > .scroll-element.scroll-y {
                                height: 100%;
                                min-height: 100%;
                                right: 0;
                                top: 0;
                                width: 17px;
                            }

                            .scrollbar-light > .scroll-element .scroll-bar {
                                background: #fefefe;
                                background: url(
                                8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
                                VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
                                VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
                                Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
                                UiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
                                0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
                                c+);
                                background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
                                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5));
                                background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
                                background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
                                background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
                                background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%);

                                border: 1px solid #dbdbdb;
                                -webkit-border-radius: 10px;
                                -moz-border-radius: 10px;
                                border-radius: 10px;
                            }

                            /* scrollbar height/width & offset from container borders */

                            .scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
                            .scrollbar-light > .scroll-content.scroll-scrollx_visible { top:  -17px; margin-top:  17px; }

                            .scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; }
                            .scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; }

                            .scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; }
                            .scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; }

                            .scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; }
                            .scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; }

                            /* update scrollbar offset if both scrolls are visible */

                            .scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
                            .scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }

                            .scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
                            .scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-light').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-light">
                                <input type="text">
                                <p class="permanent">
                                    Light version of scrollbar is great for different custom design solutions.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <input type="text">
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Rail</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SCROLLBAR RAIL ***************/

                            .scrollbar-rail > .scroll-element,
                            .scrollbar-rail > .scroll-element div
                            {
                                border: none;
                                margin: 0;
                                overflow: hidden;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-rail > .scroll-element {
                                background-color: #ffffff;
                            }

                            .scrollbar-rail > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-rail > .scroll-element .scroll-element_size {
                                background-color: #999;
                                background-color: rgba(0, 0, 0, 0.3);
                            }

                            .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
                                background-color: #666;
                                background-color: rgba(0, 0, 0, 0.5);
                            }

                            .scrollbar-rail > .scroll-element.scroll-x {
                                bottom: 0;
                                height: 12px;
                                left: 0;
                                min-width: 100%;
                                padding: 3px 0 2px;
                                width: 100%;
                            }

                            .scrollbar-rail > .scroll-element.scroll-y {
                                height: 100%;
                                min-height: 100%;
                                padding: 0 2px 0 3px;
                                right: 0;
                                top: 0;
                                width: 12px;
                            }

                            .scrollbar-rail > .scroll-element .scroll-bar {
                                background-color: #d0b9a0;

                                -webkit-border-radius: 2px;
                                -moz-border-radius: 2px;
                                border-radius: 2px;

                                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
                            }

                            .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
                                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
                            }

                            /* scrollbar height/width & offset from container borders */

                            .scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
                            .scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; }

                            .scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; }
                            .scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; }

                            .scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; }
                            .scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; }

                            .scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; }
                            .scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; }

                            /* update scrollbar offset if both scrolls are visible */

                            .scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; }
                            .scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; }

                            .scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; }
                            .scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-rail').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-rail">
                                <p class="permanent">
                                    <strong>Scrollbar Rail</strong>
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Dynamic</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SCROLLBAR DYNAMIC ***************/

                            .scrollbar-dynamic > .scroll-element,
                            .scrollbar-dynamic > .scroll-element div
                            {
                                background: none;
                                border: none;
                                margin: 0;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-dynamic > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-dynamic > .scroll-element.scroll-x {
                                bottom: 2px;
                                height: 7px;
                                left: 0;
                                min-width: 100%;
                                width: 100%;
                            }

                            .scrollbar-dynamic > .scroll-element.scroll-y {
                                height: 100%;
                                min-height: 100%;
                                right: 2px;
                                top: 0;
                                width: 7px;
                            }

                            .scrollbar-dynamic > .scroll-element .scroll-element_outer {
                                opacity: 0.3;

                                -webkit-border-radius: 12px;
                                -moz-border-radius: 12px;
                                border-radius: 12px;
                            }
                            .scrollbar-dynamic > .scroll-element .scroll-element_size {
                                background-color: #cccccc;
                                opacity: 0;

                                -webkit-border-radius: 12px;
                                -moz-border-radius: 12px;
                                border-radius: 12px;

                                -webkit-transition: opacity 0.2s;
                                -moz-transition: opacity 0.2s;
                                -o-transition: opacity 0.2s;
                                -ms-transition: opacity 0.2s;
                                transition: opacity 0.2s;
                            }

                            .scrollbar-dynamic > .scroll-element .scroll-bar {
                                background-color: #6c6e71;

                                -webkit-border-radius: 7px;
                                -moz-border-radius: 7px;
                                border-radius: 7px;
                            }

                            /* scrollbar height/width & offset from container borders */

                            .scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
                                bottom: 0;
                                height: 7px;
                                min-width: 24px;
                                top: auto;
                            }
                            .scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
                                left: auto;
                                min-height: 24px;
                                right: 0;
                                width: 7px;
                            }

                            .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
                                bottom: 0;
                                top: auto;
                                left: 2px;

                                -webkit-transition: height 0.2s;
                                -moz-transition: height 0.2s;
                                -o-transition: height 0.2s;
                                -ms-transition: height 0.2s;
                                transition: height 0.2s;
                            }

                            .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
                                left: auto;
                                right: 0;
                                top: 2px;

                                -webkit-transition: width 0.2s;
                                -moz-transition: width 0.2s;
                                -o-transition: width 0.2s;
                                -ms-transition: width 0.2s;
                                transition: width 0.2s;
                            }

                            .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
                            .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; }


                            /* update scrollbar offset if both scrolls are visible */

                            .scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
                            .scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }


                            /* hover & drag */

                            .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
                            .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
                                overflow: hidden;

                                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
                                filter: alpha(opacity=70);
                                opacity: 0.7;
                            }
                            .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
                            .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
                                opacity: 1;
                            }
                            .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
                            .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
                                height: 100%;
                                width: 100%;

                                -webkit-border-radius: 12px;
                                -moz-border-radius: 12px;
                                border-radius: 12px;
                            }

                            .scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
                            .scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
                                height: 20px;
                                min-height: 7px;
                            }
                            .scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
                            .scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
                                min-width: 7px;
                                width: 20px;
                            }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-dynamic').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-dynamic">
                                <p class="permanent">
                                    Dynamic scrollbar looks tiny and transparent, and does not interfere with reading content.
                                    It increases its size when mouse is over, showing also full scroll container.
                                    Because of bugs with opacity in IE, this scrollbar is not recommended for IE7-8.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Google Chrome</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button class="add-content">Add Content</button>
                        <button class="remove-content">Remove Content</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** SCROLLBAR GOOGLE CHROME ***************/

                            .scrollbar-chrome > .scroll-element,
                            .scrollbar-chrome > .scroll-element div
                            {
                                border: none;
                                margin: 0;
                                overflow: hidden;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-chrome > .scroll-element {
                                background-color: #ffffff;
                            }

                            .scrollbar-chrome > .scroll-element div {
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-chrome > .scroll-element .scroll-element_outer {}

                            .scrollbar-chrome > .scroll-element .scroll-element_track {
                                background: #f1f1f1;
                                border: 1px solid #dbdbdb;
                            }

                            .scrollbar-chrome > .scroll-element.scroll-x {
                                bottom: 0;
                                height: 16px;
                                left: 0;
                                min-width: 100%;
                                width: 100%;
                            }

                            .scrollbar-chrome > .scroll-element.scroll-y {
                                height: 100%;
                                min-height: 100%;
                                right: 0;
                                top: 0;
                                width: 16px;
                            }

                            .scrollbar-chrome > .scroll-element .scroll-bar {
                                background-color: #d9d9d9;
                                border: 1px solid #bdbdbd;
                                cursor: default;

                                -webkit-border-radius: 2px;
                                -moz-border-radius: 2px;
                                border-radius: 2px;
                            }

                            .scrollbar-chrome > .scroll-element .scroll-bar:hover {
                                background-color: #c2c2c2;
                                border-color: #a9a9a9;
                            }

                            .scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
                                background-color: #919191;
                                border-color: #7e7e7e;
                            }

                            /* scrollbar height/width & offset from container borders */

                            .scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; }
                            .scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top:  -16px; margin-top:  16px; }

                            .scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; }
                            .scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; }

                            .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; }
                            .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; }
                            .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; }

                            .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; }
                            .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; }
                            .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; }

                            /* update scrollbar offset if both scrolls are visible */

                            .scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
                            .scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }

                            .scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
                            .scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }

                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-chrome').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-chrome">
                                <p class="permanent">
                                    Google Chrome scrollbar
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
                                    scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
                                    Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
                                    hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
                                    pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
                                    sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
                                    ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
                                    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
                                    viverra nisi, in interdum massa nibh nec erat.
                                </p>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Textarea Scrollbar (IE8+)</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /*************** TEXTAREA STYLES ***************/

                            .textarea-scrollbar {
                                height: 250px;
                                width: 500px;
                            }
                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.fixed-table-body').scrollbar();
                            });
                        </script>
                        <div class="demo">
                            <textarea class="textarea-scrollbar scrollbar-outer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.</textarea>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>
